<script setup lang="ts">
import LayoutFooter from '../../Layout/components/LayoutFooter.vue';
import LayoutNav from '../../Layout/components/LayoutNav.vue';


import { onMounted, ref , watch} from 'vue'
import { getCategory } from '@/api/good'

const styleList = ref([
  { id: 1, styleName: '上衣' },
  { id: 2, styleName: '裤子' },
  { id: 3, styleName: '裙子' },
  { id: 4, styleName: '内衣' },
  { id: 5, styleName: '女鞋' },
  { id: 6, styleName: '男鞋' },
  { id: 7, styleName: '女包' },
])
const categorylist = ref([])
const getCategoryList = async () => {
  const res = await getCategory()
  //console.log(res.rows)
  categorylist.value = res.rows
}
getCategoryList()

import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute()
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  categoryId: '',
  goodName:route.query.name || '',
})
const total = ref(0);
const disabled = ref(false);
const goodlist = ref([])
import { getGoodListAPI } from '@/api/good'

onMounted(() => {
  console.log(route.query.name)
  getGoodList()
})

// 监听路由变化
watch(() => route.query.name, (newName) => {
  if (newName) {
    queryParams.value.goodName = newName
    queryParams.value.pageNum = 1
    getGoodList()
  }
})

const getGoodList = async () => {
  const res = await getGoodListAPI(queryParams.value)
  console.log(res)
  goodlist.value = res.rows
}

//加载更多
const load = async () => {
  console.log('加载更多')
  if(disabled.value) return
  //获取下一页数据
  queryParams.value.pageNum++;
  const res = await getGoodListAPI(queryParams.value);
  total.value = res.total;
  goodlist.value = [...goodlist.value, ...res.rows];
  //加载完毕停止监听
  disabled.value = goodlist.value.length >= total.value; 
  console.log('disabled结果'+disabled.value);
}

const search = ref('')
//根据搜索框内容查询
const searchItems = async () => {
  disabled.value = false
  queryParams.value.pageNum = 1
  queryParams.value.goodName = search.value;
  router.replace({
      name: 'goodSearch',
      query: {
        name: search.value
      }
  });
  await getGoodList()

}
//添加分类查询参数
const selectCategory = (item) => {
  queryParams.value.categoryId = item.id;
  queryParams.value.pageNum = 1;
  getGoodList()
}
//清空分类查询参数
const clearCategory = () => {
  queryParams.value.categoryId = ''
  getGoodList()
}

</script>

<template>
  <layout-nav/>
  <div class="container">
    <header class='app-header'>
    <div class="container">
      <div class="logo">
        <RouterLink to="/">桃禧</RouterLink>
      </div>
      <div class="app-header-nav">
        <span>商品搜索</span>
        <el-input v-model="search" placeholder="输入您想要的商品" size="big" clearable style="padding: 5px 30px ;"></el-input>
      </div>
      <div class="search">
        <el-button 
          type="primary" 
          size="big"
          @click="searchItems">
          搜索
          <i class="iconfont icon-search"></i>
        </el-button>
      </div>
    </div>
  </header>
  </div>
  <div class="container">
    <div class="search-box">
      <ul>
        <li>服装分类</li>
        <li @click="clearCategory">全部</li>
        <li v-for="item in categorylist" :key="item.id" @click="selectCategory(item)">
        {{ item.categoryName }}</li>
      </ul>
      <ul>
        <li>款式分类</li>
        <li @click="clearCategory">全部</li>
        <li v-for="item in styleList" :key="item.id" @click="selectCategory(item)">
        {{ item.styleName }}</li>
      </ul>
    </div>
    <div class="home-product">
      <div class="goodList-box">
        <ul class="goods-list" v-infinite-scroll="load" :infinite-scroll-disabled="disabled">
          <li v-for="good in goodlist" :key="good.id">
            <RouterLink :to="{name: 'gooddetail', params: {goodid: good.id}}" class="goods-item">
            <img v-img-lazy="good.picture" alt="" />
              <p class="name ellipsis">{{ good.goodName }}</p>
              <p class="desc ellipsis">{{ good.description }}</p>
              <p class="price">&yen;{{ good.price }}</p>
            </RouterLink>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <LayoutFooter/>
</template>

<style scoped lang="scss">
  .app-header {
  background: #ffffff;
  height: 130px;

  .container {
    display: flex;
    // padding-left: 15%;
    align-items: center;
    justify-content: center;
  }

  .logo {
    width: 80px;

    a {
      display: block;
      height: 100px;
      width: 100%;
      text-indent: -9999px;
      background: url('@/assets/images/logo.png') no-repeat center 18px / contain;
    }
  }

  .app-header-nav {
    width: 600px;
    // display: flex;
    padding-left: 50px;
    position: relative;
    z-index: 998;
  
  }

  .search {
    width: 300px;
    height: 32px;
    // position: relative;
    margin-top: 55px;
    padding-left: 5px;
    line-height: 32px;

    .icon-search {
      font-size: 18px;
    }

    input {
        color: #000;
    }
  }

}

  .container{
    background: #fff;
    .search-box{
      margin-left: 20px;

    }

    h1{
      padding: 10px;
      margin-left: 20px;
    }
    p{
      padding: 10px;
      margin-left: 20px;
    }
    ul{
      display: flex;
      flex-wrap: wrap;

    }
    li{
      padding: 10px;
      margin-right: 20px;
      font-size: 18px;
    }
    li:first-child {
      width: 100px;
    }
  }

   .home-product {
    background: #fff;
    margin: 20px 0 20px 0;
    display: flex;

    .cover {
      width: 240px;
      height: 610px;
      margin-right: 10px;
      position: relative;

      img {
        width: 100%;
        height: 100%;
      }

      .label {
        width: 188px;
        height: 66px;
        display: flex;
        font-size: 18px;
        color: #fff;
        line-height: 66px;
        font-weight: normal;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translate3d(0, -50%, 0);

        span {
          text-align: center;

          &:first-child {
            width: 76px;
            background: rgba(0, 0, 0, 0.9);
          }

          &:last-child {
            flex: 1;
            background: rgba(0, 0, 0, 0.7);
          }
        }
      }
    }


    .goods-list {
      width: 1240px;
      display: flex;
      flex-wrap: wrap;

      li {
        width: 240px;
        height: 300px;
        margin-right: 10px;
        margin-bottom: 10px;

        &:nth-last-child(-n + 4) {
          margin-bottom: 0;
        }

        &:nth-child(5n) {
          margin-right: 0;
        }
      }
    }

    .goods-item {
      display: block;
      width: 240px;
      padding: 20px 30px;
      text-align: center;
      transition: all .5s;
      background: #fff;


      &:hover {
        transform: translate3d(0, -3px, 0);
        box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
      }

      img {
        width: 160px;
        height: 160px;
      }

      p {
        padding-top: 10px;
      }

      .name {
        font-size: 16px;
      }

      .desc {
        color: #999;
        height: 29px;
      }

      .price {
        color: $priceColor;
        font-size: 20px;
      }
    }
  }

</style>